<?php
    include('config.ini.php');
    include('function/function.php');
    $con = db_connect();
    
    $sql = 'SELECT * FROM gallery ORDER BY img_position';
    $result= mysql_query($sql);
    $countRow = mysql_num_rows($result);
    $galleries_ = '';
    $i = 1;
    
    while($row=mysql_fetch_assoc($result)){
	$galleries_ .= <<<galleries_
	    <img src="images/header_slide/{$row['img_path']}" alt="{$row['img_title']}  (image {$i} of {$countRow})" />
galleries_;
	$i++;
    }
    
    db_close($con);
?>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".mySelect").styleSelect({styleClass: "selectDark"});
        
        $("#mySelect1").change(function() {
            var value = $("#mySelect1 option:selected").val();
	    //alert('1---'+value);
            if(value!=0){
                $("#mySelect1FRM").submit();
            }
        });
        
        $("#mySelect2").change(function() {
            var value = $("#mySelect2 option:selected").val();
	    //alert('2---'+value);
            if(value!=0){
                $("#mySelect2FRM").submit();
            }
        });
        
        $('.header2_gallery_slideshow').cycle({
	    fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc....
            prev:   '#header_gallery_ctrl_prev,#header2_gallery_ctrl_prev_', 
            next:   '#header_gallery_ctrl_next,#header2_gallery_ctrl_next_', 
            timeout: 4000,
            pause: true,
            speed : 2000,
            before: function() { 
                $('#header2_gallery_ctrl_text').html(this.alt);
            }
	});
        
        $('#header_gallery_ctrl_pause').click(function() { 
            $('.header2_gallery_slideshow').cycle('pause');
            $('#header_gallery_ctrl_pause').css('display','none');
            $('#header_gallery_ctrl_play').css('display','inline');
        });
        
        $('#header_gallery_ctrl_play').click(function() { 
            $('.header2_gallery_slideshow').cycle('resume', true);
            $('#header_gallery_ctrl_play').css('display','none');
            $('#header_gallery_ctrl_pause').css('display','inline');
        });
    });
    
</script>

<div id="header2">
    <div id="header2_gallery" class="png_bg">
        <div id="header2_gallery_img">
            <div class="header2_gallery_slideshow">
		<?php echo $galleries_; ?>
	    </div>
	    <div id="header2_gallery_ctrl_prev">
		<img src="images/header_gallery_ctrl_left.png" alt="Previous" class="header2_gallery_ctrl" id="header2_gallery_ctrl_prev_" />
	    </div>
	    <div id="header2_gallery_ctrl_next">
		<img src="images/header_gallery_ctrl_right.png" alt="Next" class="header2_gallery_ctrl" id="header2_gallery_ctrl_next_" />
	    </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div id="header2_gallery_ctrl">
            <div id="header2_gallery_ctrl_img">
                <img src="images/header_gallery_ctrl_prev.png" alt="Previous" id="header_gallery_ctrl_prev" />
                <img src="images/header_gallery_ctrl_play.png" alt="Play" id="header_gallery_ctrl_play" class="display_none"/>
                <img src="images/header_gallery_ctrl_pause.jpg" alt="Pause" id="header_gallery_ctrl_pause"/>
                <img src="images/header_gallery_ctrl_next.png" alt="Next" id="header_gallery_ctrl_next"/>
                <img src="images/header_gallery_ctrl_line.png" alt="" />
            </div>
            <div id="header2_gallery_ctrl_text">
                Contemporary style  (image 1 of 17)
            </div>
            <div class="clear">&nbsp;</div>
        </div>
    </div>
    <div id="header2_search">
        <div id="header2_search1" class="header2_search png_bg">
            <span class="text_white">สร้างบ้านที่ใช่</span> <span class="text_black">ใส่ใจทุกรายละเอียด</span>
        </div>
        
        <div id="header2_search2" class="header2_search png_bg">
            <div class="header2_search2_top">
                <div class="header2_search2_glass">
                    <img src="images/header2_search_glass.png" alt="ค้นหาบ้านตามขนาดพื้นที่" />
                </div>
                <div class="header2_search2_text">
                    ค้นหาบ้านตามขนาดพื้นที่
                </div>
                <div class="clear">&nbsp;</div>
            </div>
            <div class="header2_search2_bottom">
                <form action="search_result.php" id="mySelect1FRM">
                    <input type="hidden" name="type" value="size" />
                    <select name="value" class="mySelect" id="mySelect1">
                        <option value="0">---------- ค้นหาบ้านตามขนาดพื้นที่ ----------</option>
                        <option value="1">100-200 ตารางเมตร</option>
                        <option value="2">201-300 ตารางเมตร</option>
                        <option value="3">301-400 ตารางเมตร</option>
                        <option value="4">401-500 ตารางเมตร</option>
                        <option value="5">มากกว่า 500 ตารางเมตร ขึ้นไป</option>
                    </select>
                </form>
            </div>
        </div>
        
        <div id="header2_search3" class="header2_search png_bg">
            <div class="header2_search2_top">
                <div class="header2_search2_glass">
                    <img src="images/header2_search_glass.png" alt="ค้นหาบ้านตามขนาด STYLE" />
                </div>
                <div class="header2_search2_text">
                    ค้นหาบ้านตามขนาด STYLE
                </div>
                <div class="clear">&nbsp;</div>
            </div>
            <div class="header2_search2_bottom">
                <form action="search_result.php" id="mySelect2FRM">
                    <input type="hidden" name="type" value="style" />
                    <select name="value" class="mySelect" id="mySelect2">
                        <option value="0">--------- ค้นหาบ้านตามขนาด STYLE ---------</option>
                        <option value="10">CONTEMPORARY STYLE</option>
                        <option value="20">MODERN STYLE</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
    <div class="clear">&nbsp;</div>
</div>
<div class="clear">&nbsp;</div>